<template>
  <div class="index">
    <!--banner-->
    <div class="banner">
      <img src="@/assets/img/banner.jpg" alt="">
    </div>

    <!--种类-->
    <div class="types">
      <types-item v-for="item in types"
                  :key="item.ico"
                  :ico="item.ico"
                  :txt="item.txt"></types-item>
    </div>

    <cross-line></cross-line>

    <title-bar txt="附近商家"></title-bar>

    <!--附近商家-->
    <div class="nearby">
      <seller-list-item v-for="item in sellerList" :data="item" :key="item.name"></seller-list-item>
    </div>

    <tab-bar></tab-bar>
  </div>
</template>

<script>
import TypesItem from '@/components/base/types-item/types-item'
import CrossLine from '@/components/base/cross-line/cross-line'
import TitleBar from '@/components/base/title-bar/title-bar'
import SellerListItem from '@/components/base/seller-list-item/seller-list-item'
import TabBar from '@/components/base/tab-bar/tab-bar'
import axios from 'axios'

export default {
  components: {
    TypesItem,
    CrossLine,
    TitleBar,
    SellerListItem,
    TabBar
  },
  name: "Index",
  data() {
    return {
      types: [
        {
          ico: require('./img/types/types (7).png'),
          txt: '美食'
        },
        {
          ico: require('./img/types/types (0).png'),
          txt: '美团超市'
        },
        {
          ico: require('./img/types/types (1).png'),
          txt: '生鲜果蔬'
        },
        {
          ico: require('./img/types/types (5).png'),
          txt: '甜点饮品'
        },
        {
          ico: require('./img/types/types (4).png'),
          txt: '正餐优选'
        },
        {
          ico: require('./img/types/types (2).png'),
          txt: '美团专送'
        },
        {
          ico: require('./img/types/types (3).png'),
          txt: '能量西餐'
        },
        {
          ico: require('./img/types/types (6).png'),
          txt: '精品小吃'
        }
      ],
      sellerList: []
    }
  },
  methods: {
    getSellerList() {
      axios.get('/mock/getSellerList').then(res => {
        if(res.data.code == 0) {
          this.sellerList = res.data.data.poilist;
        }
        console.log(this.sellerList)
      })
    }
  },
  created() {
    this.getSellerList()
  }
}

</script>

<style lang="scss" scoped>
@import '@/assets/scss/const.scss';
@import '@/assets/scss/mixin.scss';

.index {
  .banner {
    height: 170px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .types {
    overflow: hidden;
    padding-bottom: 30px;
  } 
  .nearby {
    padding-bottom: 50px;
  }
}
</style>